<template>
  <div class="container">
    <div class="top-nav" :style="{height: spaceBarHeight + 'px' , background:globalStyle.styleType === 10 ? globalStyle.color2 : globalStyle.color1}">
      <div class="flex-center v-align-c top-name-bar"
        :style="{
          paddingTop: statusBarTop + 'px',
          color: globalStyle.color5,
          height: barHeight + 'px' ,
          boxsizing: 'border-box;'}">
        <label class="top-txt font-w">个人中心</label>
      </div>
    </div>
    <template v-if="!getCustomerId">
      <get-phone-info v-if="isGetPhoneInfo" @updatePhoneInfo="initPhoneLayer" :showBackBtn="showBackBtn" @showPage="showPage"></get-phone-info>
      <get-user-info
        v-if="isGetUserInfo"
        pageType="personal"
        @authPhoneInfo="authPhoneInfo"
        :showBackBtn="showBackBtn"
        @showPage="showPage"
        @lowVersion="lowVersionEls"></get-user-info>
    </template>
    <template v-if="getCustomerId && !getPhone">
      <get-phone-info v-if="isGetPhoneInfo" @updatePhoneInfo="initPhoneLayer" :showBackBtn="showBackBtn" @showPage="showPage"></get-phone-info>
    </template>
    <im-connect v-if="isImConnect"></im-connect>
    <div class="top-header-bg" :style="{marginTop: spaceBarHeight+ 'px'}">
      <div class="bg-style" :style="{background:globalStyle.styleType === 10 ? globalStyle.color2 : 'linear-gradient('+globalStyle.color1 +' 30%,'+ globalStyle.color2 +')'}"></div>
    </div>
    <div class="main-box mar-l-15 mar-r-15" :style="{'margin-top': !statusIs ? '-210rpx' : '-200rpx'}">
      <div class="flex v-align-c userinfo mar-r--15">
        <div class="flex-item flex v-align-c">
          <div class="avatar-bar pos-rel mar-r-12">
            <img v-if="fileSpace && getCustomerId" :src="fileSpace + '/images/icon-v.png'" class="icon-v" alt="">
            <!-- <img v-if="memberInfo.avatar" class="a-img" :src="memberInfo.avatar" alt=""> -->
            <img v-if="fileSpace" class="a-img" :src="getCustomerId ? memberInfo.avatar : fileSpace + '/images/default-avatar.png'" alt="">
          </div>
          <div class="info">
            <h5
              :style="{color: globalStyle.color5}"
              class="font-18 font-w font-white"
              v-text="getCustomerId ? memberInfo.nickname : '登录/注册'"></h5>
          </div>
        </div>
        <div
          v-if="veekrayStatus === 1"
          @click="toStoreApp"
          class="flex v-align-c change-user pad-t-7 pad-b-6 pad-l-8 pad-r-8">
          <img v-if="fileSpace && globalStyle.styleType === 10" :src="fileSpace + '/images/icon-change-u.png'" alt="" class="icon-c-u mar-r-2 font-white">
          <img v-if="fileSpace && globalStyle.styleType !== 10" :src="fileSpace + '/images/icon-change-u-w.png'" alt="" class="icon-c-u mar-r-2 font-white">
          <p
            :style="{color: globalStyle.color5}"
            class="font-12 font-white">切换为卖家</p>
        </div>
        <div class="flex-col flex-center mar-r-27" v-if="groupBuyAuthority && !veekrayStatus" @click="getPickUpCode">
          <img v-if="fileSpace" :src="fileSpace + '/images/code-fff.png'" class="width-23 height-23" alt="">
          <span class="font-12 font-white">提货码</span>
        </div>
      </div>
      <!-- 买家内容展示 -->
      <template v-if="!statusIs">
        <div class="pancel-bar mar-b-10 mar-t-18">
          <div class="order-buy-all flex v-align-c pad-l-16 pad-t-8 pad-b-8">
            <div class="font-16 font-w t-txt">我的订单</div>
            <div class="tabs-buy-all font-12 flex v-align-c pad-r-7 pad-t-8 pad-b-5" @click="customerOrderEls('all')">
              <p>全部订单</p>
              <icon class="iconfont icon-arrow-right font-12"></icon>
            </div>
          </div>
          <ul class="flex v-align-c buyer-o-list pad-t-16 pad-b-14 font-12">
            <li class="flex-item pos-rel" @click="customerOrderEls('wPay')">
              <div v-if="unReadCount.buyerUnpaidNum" class="van-infos">{{ unReadCount.buyerUnpaidNum }}</div>
              <img v-if="fileSpace" :src="fileSpace + appIconList.icon1" class="width-18 height-19" alt="">
              <label>待付款</label>
            </li>
            <li class="flex-item pos-rel" @click="customerOrderEls('wShipped')">
              <div v-if="unReadCount.buyerPaidNum" class="van-infos">{{ unReadCount.buyerPaidNum }}</div>
                <img v-if="fileSpace" :src="fileSpace + appIconList.icon2" class="width-22 height-19" alt="">
              <label>待发货</label>
            </li>
            <li class="flex-item pos-rel" @click="customerOrderEls('wReceive')">
              <div v-if="unReadCount.buyerDeliveredNum" class="van-infos">{{ unReadCount.buyerDeliveredNum }}</div>
              <img v-if="fileSpace" :src="fileSpace + appIconList.icon3" class="width-22 height-19" alt="">
              <label>待收货</label>
            </li>
            <li v-if="getShowBuyCard" class="flex-item pos-rel" @click="customerReturnEls('buyer')">
              <!-- <div v-if="unReadCount.cancelUnreadProjectOrderNum" class="van-infos">{{ unReadCount.cancelUnreadProjectOrderNum }}</div> -->
              <div v-if="unReadCount.afterSaleNum" class="van-infos">{{ unReadCount.afterSaleNum }}</div>
              <img v-if="fileSpace" :src="fileSpace + appIconList.icon4" class="width-19 height-19" alt="">
              <label>退款/售后</label>
            </li>
          </ul>
        </div>
        <div>
          <!-- applyStatus为-1是从未申请过，为0是申请中，为1是通过，为2是拒绝 -->          
          <!-- 社区团购banner 或社群分销-->
          <div v-if='showBanner'>
            <img v-if="bannerArr['shop']" :src="bannerArr['shop']" alt="" class="apply-shopowner" @click="toStoreApp(0)">
            <img v-if="bannerArr['group']" :src="bannerArr['group']" alt="" @click="toStoreApp(1)">
          </div>
        </div>
        <div class="pancel-bar mar-b-10">
          <ul class="flex v-align-c pad-b-17" style="flex-wrap:wrap">
            <li v-if="getShowBuyCard" style="width:25%;" @click="myCouponEls" class="pad-t-19 pos-rel coupon-infos">
              <div v-if="couponUnreadNum" class="van-infos">{{ couponUnreadNum }}</div>
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-coupon.png'" class="width-23 height-23" alt="">
              <label>我的优惠券</label>
            </li>
            <li v-if="getShowBuyCard" style="width:25%;" @click="addressEls" class="pad-t-19">              
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-local-2.png'" class="width-23 height-23" alt="">
              <label>收货地址</label>
            </li>
            <!-- 在线客服 根据企业客服增值功能来显示和隐藏 -->
            <li style="width:25%;" class="pos-rel pad-t-19"  v-if="enterpriseCustomerServiceAuthority">
              <button open-type="contact" class="contactBtn hidden-submit button-icon"
              :session-from="'7moor|'+ memberInfo.nickname + '|' + memberInfo.avatar +'|'+ customField"></button>
              <div style="position:relative">
                <img v-if="fileSpace" :src="fileSpace + '/images/icon-onchat-2.png'" class="width-23 height-23" alt="">
                <!-- <span class="news-tag-style1">99+</span> -->
              </div>
              <label>在线客服</label>
            </li>
            <li class="pad-t-19" style="width:25%;" @click="$pt.navigateTo({url:'/pages/personal/my-distribution/main'})" v-if="shareType && getShowBuyCard">
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-pickup-3.png'" class="width-23 height-23" alt="">
              <label>
                <label>{{getAppInfo.myCommissionAlias || '我的分销'}}</label>
                <label class="font-9 font-red" v-if="memberStat.totalShareShopAmount">赚￥{{memberStat.totalShareShopAmount}}</label>
              </label>
            </li>
            <li style="width:25%;" class="pad-t-19" @click="$pt.navigateTo({url:'/pages/personal/cancellation-desk/main'})"  v-if="pickUpFlag">
              <img v-if="fileSpace" :src="fileSpace + '/images/icon-pickup-2.png'" class="width-23 height-23" alt="">
              <label>店员核销台</label>
            </li>
            <!-- 顾客 消息按钮根据运营总后台小B客服增值功能的勾选 对应显示/隐藏 -->
            <li style="width:25%;" v-if="shopCustomerServiceAuthority && getShowBuyCard" class="pos-rel pad-t-19" @click="serviceTo">
              <div style="position:relative">
                <img v-if="fileSpace" :src="fileSpace + '/images/news-icon-3.png'" class="width-23 height-23" alt="">
                <span :class="unread['sellerUnread'] > 99 ? 'news-tag-style1': 'news-tag-style2'" v-if="getCustomerId !== getMemberId && unread['sellerUnread'] > 0">{{unread.sellerUnread}}</span>
              </div>
              <label>联系店主</label>
            </li>
            <li style="width:25%;" class="pos-rel pad-t-19" v-if="groupBuyAuthority && veekrayStatus" @click="getPickUpCode">
              <div style="position:relative">
                <img v-if="fileSpace" :src="fileSpace + '/images/goods-code.png'" class="width-23 height-23" alt="">
              </div>
              <label>提货码</label>
            </li>
          </ul>
        </div>
      </template>
      <!-- 前往任务宝 -->
      <div v-if="getShowBuyCard" :class="statusIs ? 'light-bg mar-l--15 mar-r--15 pad-l-15 pad-r-15' : ''">
        <div v-if="getShowBuyCard && taskPosterAuth" class="banner" @click="$pt.navigateToMiniProgram({appId: 'wxf90184050e49c24f'})">
          <img v-if="fileSpace" mode="widthFix" class="width-346 height-95 border-radius-5" :src="fileSpace + '/images/get_task_3.png'" />
        </div>
        <div
          v-if="!enterpriseCopy.watermarkAuthority"
          class="copy-right text-align-c pad-10 font-12">
          ©{{ getAppInfo.appName }} 版本号：{{ getAppInfo.appVersion }}
        </div>
        <div v-else class="copy-right-logo text-align-c">
          <img v-if="fileSpace" mode="widthFix" class="width-44 height-17" :src="fileSpace + '/images/copy-right-logo.png'" />
          <p class="font-10">众项提供技术支持</p>
        </div>
      </div>      
      <div class="fix-r-btn flex-col">
        <!-- 回我店铺 -->
        <div class="align-r pad-r-13">
          <back-btn v-if="!statusIs" urlFrom="personal" />
        </div>
      </div>
    </div>
    <!-- <div class="pad-15 font-16" @click="$pt.navigateTo({url:'/pages/personal/message/list/main'})">消息</div> -->
    <div class="dialog-wrap">
      <van-dialog :show="applyLiveShow" title="申请成为主播" use-slot show-cancel-button @close="onClose('applyLiveShow')" @confirm="applyLiveConfirm">
        <div class="pad-l-25 pad-r-25 pad-b-13 mar-t-13" catchtouchmove="true">
          <div class="flex flex-between apply-info">
            <div>我的微信号</div>
            <input type="text">
          </div>
          <div class="explain">注：微信号用于您直播间开播和查询收入使用除此之外 系统不会对外透露，成为主播后无法修改微信号。</div>
        </div>
      </van-dialog>
      <van-dialog :show="applyReviewShow" use-slot @close="onClose('applyReviewShow')" confirmButtonText="朕知道了">
        <div class="pad-b-15 pad-t-20 align-c" catchtouchmove="true">
          <van-icon name="clock" color="#aaa" size="54px" />
          <div class="font-color-6 font-14 mar-t-5">审核中</div>
          <div class="font-10 font-color-9 mar-t-5">微信号：we79001</div>
        </div>
      </van-dialog>
    </div>
    <!-- 用户未授权情况下点击 页面 进入授权页 -->
    <div
      v-if="!getCustomerId || !getPhone"
      class="layout"
      style="background:rgba(255,255,255,0); width:100%;height:100%;position: fixed; top:0;left:0;z-index: 1000"
      @click="goAuthPage"></div>
    <!-- 二维码 -->
    <div class="code-box">
      <van-popup :round="true" :show="showCodeAlert" @close="showCodeAlert = false">
        <div class="width-300">
          <!-- 社区团购 -->
          <div class="width-300 height-127 alert-bg pad-t-5 text-align-c">
            <span class="font-21 font-white font-w">{{getAppInfo.appName}}</span>
            <div class="font-12 font-white flex mar-t-1">
              <span class="flex subject" style="margin-left:41px"><span class="dots"></span>货源直采</span>
              <span class="flex subject mar-l-28"><span class="dots"></span>品质保证</span>
              <span class="flex subject mar-l-27"><span class="dots"></span>便宜省心</span>
            </div>
          </div>
          <div class="width-275 height-283 code-area flex flex-center" style="top:-57px">
            <img  v-if="pickUpGoodesCode" class="width-244 height-244" :src="pickUpGoodesCode" alt="">
          </div>
          <div class="font-15 font-color text-align-c font-w mar-b-20" style="margin-top:-34px">
            <span>请向店主展示此二维码</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import GetUserInfo from '@/components/GetUserInfo'
import GetPhoneInfo from '@/components/GetPhoneInfo'
import ImConnect from '@/components/ImConnect'
import { getMemberInfo } from '@/api/home'
import {
  statMemberCommission,
  countPaidUserOrder,
  getSysAppMarketByMemberId,
  statOrderByMemberId,
  getEntityByMemberId,
  getEnterpriseByMemberId,
  getByMemberId,
  getByEnterpriseId,
  countCouponNum,
  getCommanderBanner,
  getPickUpCode
} from '@/api/personal'
import {
  setNickName, setEnterpriseId, setMemberId,
  setVeekrayStatus, setCbFlag } from '@/utils/auth'
import BackBtn from '@/components/BackBtn'
import { listEnterpriseMessageConfig, getAppInfo, getAuthority } from '@/api/common'
import { appColor } from '@/api/appColor'
import { appIcon } from '@/api/appIcon'
export default {
  components: { GetPhoneInfo, BackBtn, GetUserInfo, ImConnect },
  data() {
    return {
      getAppInfo: {},
      activeIndex: 0,
      tab: [],
      unReadCount: {},
      memberInfo: {},
      statusIs: false,
      statusText: '切换为卖家',
      pickUpFlag: false,
      memberWallet: {},
      memberStat: {},
      freeBoolean: false,
      predict: {},
      paidUserOrders: 0,
      isGetPhoneInfo: false,
      backToHome: false,
      enterpriseAndSellFlag: {
        showSellFlag: null
      },
      shareType: false,
      enterpriseId: null,
      entityData: {},
      enterpriseCopy: {},
      globalStyle: {},
      appIconList: {},
      applyLiveShow: false,
      applyReviewShow: false,
      anchorAuth: 0, // 是否主播 0：不是  1：是
      applyStatus: null, // 申请店主状态
      applyStatusClick: false, // 判断申请店主拒绝之后是否通知
      enterpriseConfig: {},
      isGetUserInfo: false,
      showLayOut: true,
      showBackBtn: false,
      statusBarHeight: 0,
      barHeight: 0,
      spaceBarHeight: 0,
      statusBarTop: 0,
      taskPosterAuth: false,
      navList: [],
      barObj: {
        leftList: [],
        rightList: []
      },
      couponUnreadNum: null,
      shopCustomerServiceAuthority: 1, // 小B客服增值功能 0关闭 1开启
      enterpriseCustomerServiceAuthority: 1, // 企业客服增值功能 0关闭 1开启
      unread: {
        sellerUnread: 0, // 买家收到 卖家的消息(未读消息数)
        buyerUnread: 0 // 卖家收到 买家的消息(未读数)
      },
      shopSelectionAuthority: 0, // 小B选品增值功能 0关闭 1开启
      isImConnect: false,
      messageIdsArr: [
        {
          dataArr: ['1501', '1502'], // 小B客服消息订阅
          ids: []
        },
        {
          dataArr: ['1202', '1203', '1204'], // 退货/退款 消息订阅
          ids: []
        },
        {
          // dataArr: ['1101', '1105', '1103', '1104'], // 待发货、取消订单、已收货、待收货 消息订阅
          dataArr: ['1101', '1103', '1104'], // 待发货、取消订单、已收货、待收货 消息订阅，// 订阅类型最多接受3个
          ids: []
        },
        {
          dataArr: ['1401', '1402'], // 退货/退款 消息订阅
          ids: []
        }
      ],
      bannerArr: {group: '', shop: ''},
      // bannerUrl: '',
      showShopBanner: false, // 是否显示分销banner
      groupBuyAuthority: 0, // 是否开启社区团购
      showBanner: false, // 是否有banner图 要显示
      veekrayStatus: 0, // 用户是否有店长身份
      customerCommanderStatus: 0, // 是否有顾客团长身份
      showCodeAlert: false, // 显示店主二维码
      pickUpGoodesCode: '' // 提货码url
    }
  },
  onLoad() {
    this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    // 获取胶囊按钮信息
    let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
    // 设备信息
    let devInfo = this.$pt.getSystemInfoSync()
    // 整个导航栏高度
    this.spaceBarHeight = devInfo['statusBarHeight'] + menuButtonInfo['height'] + (menuButtonInfo['top'] - devInfo['statusBarHeight']) * 2
    this.barHeight = this.statusBarHeight - 2
    // this.spaceBarHeight = this.statusBarHeight + 44
    this.statusBarTop = this.statusBarHeight - 42
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      // android类型
      this.statusBarTop = this.statusBarHeight - 40
      // this.spaceBarHeight = this.statusBarHeight + 36
      this.barHeight = this.statusBarHeight - 4
    }
    // 判断是否从扫码页面过来的
    if (this.getCurrentPage().query.scanning === '1') {
      this.backToHome = true
    } else {
      this.backToHome = false
    }
    this.unread['sellerUnread'] = Number(this.$pt.getStorageSync('imUnreadSeller')) || Number(this.getImUnreadSeller)
    this.unread['buyerUnread'] = this.$pt.getStorageSync('imUnreadBuyer') * 1 || this.getImUnreadBuyer * 1
  },
  mounted() {
    this.customerCommanderStatus = this.$pt.getStorageSync('customerCommanderStatus')
    this.veekrayStatus = this.$pt.getStorageSync('veekrayStatus')
    // 获取 社区增值功能
    this.groupBuyAuthority = this.$pt.getStorageSync('appInfo').groupBuyAuthority
    this.getBanner()
  },
  onShow() {
    this.isGetUserInfo = false
    this.isGetPhoneInfo = false
    // 没有获取到登录信息
    this.getAppEls()
    for (let item of this.messageIdsArr) {
      this.messageSubscription(item)
    }
    this.getAuthority()
    setTimeout(() => {
      this.getEntityByMemberId()
    }, 500)
    this.countCouponNum()
    // 查看店主申请状态
    let personalType = this.$pt.getStorageSync('personalType')
    if (this.getCustomerId) {
      this.getMemberInfo()
      this.getEnterpriseByMemberId()
      this.statMemberCommission()
      this.countPaidUserOrder()
      this.getByMemberId()
    }
    this.$pt.removeStorageSync('sellList')
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
    this.globalStyle = this.getAppInfo.style
    this.getAppInfo.appVersion = process.env.VERSION
    let navbarBgColor = this.globalStyle.styleType === 10 ? this.globalStyle.color2 : this.globalStyle.color1
    this.appIconList = appIcon(this.globalStyle.styleType, personalType)
    // 首页顶部信号栏，白色
    // console.log('this.globalStyle', this.globalStyle)
    if (this.getAppInfo.titleType === 11) {
      this.$pt.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: navbarBgColor
      })
    }
    // this.$pt.setNavigationBarColor({
    //   frontColor: '#ffffff',
    //   backgroundColor: navbarBgColor
    // })
    if (this.getCustomerId) {
      if (this.statusIs) {
        this.statOrderByMemberId(1)
      } else {
        this.statOrderByMemberId(0)
      }
    }
    this.$pt.removeStorageSync('__positiveUrl__')
    this.$pt.removeStorageSync('__reverseUrl__')
    // 设置购物车角标数
    this.totalCartBadge()
    this.$pt.removeStorageSync('pageBuyFrom')
    this.unread['buyerUnread'] = this.$pt.getStorageSync('imUnreadBuyer') * 1 || this.getImUnreadBuyer * 1
    this.unread['sellerUnread'] = this.$pt.getStorageSync('imUnreadSeller') * 1 || this.getImUnreadSeller * 1
    // 清除分类缓存分类ID
    this.$pt.removeStorageSync('categoryInfo')
    // 清楚证件信息拷贝缓存设置
    this.$pt.removeStorageSync('copyBoolean')
    this.$pt.removeStorageSync('copyRealInfo')
  },
  onUnload() {
    // 如果是从扫码页面过来的，点击返回按钮的时候回到首页
    if (this.backToHome) {
      this.$pt.switchTab({ url: '/pages/home/main' })
    }
  },
  watch: {
    'getCustomerId'(val) {
      if (val) {
        this.getMemberInfo()
        // this.getEntityByMemberId()
        this.getEnterpriseByMemberId()
        this.statMemberCommission()
        this.countPaidUserOrder()
        this.getByMemberId()
      }
    },
    getInMessage(val) {
      if (val === '1') {
        console.log('personal watch')
        const that = this
        that.isImConnect = false
        setTimeout(() => {
          that.isImConnect = true
        }, 100)
        setTimeout(function() {
          that.$set(that.unread, 'sellerUnread', that.getImUnreadSeller * 1)
          that.$set(that.unread, 'buyerUnread', that.getImUnreadBuyer * 1)
        }, 2000)
      }
    }
  },
  methods: {
    toStoreApp(type) {
      if (!this.getAppInfo.storeAppId) {
        this.$utils.showToast({ title: '店主端AppId未配置' })
        return
      }
      switch (type) {
        case 0:
          this.$pt.navigateToMiniProgram({appId: this.getAppInfo.storeAppId})
          break
        case 1:
          this.$pt.navigateToMiniProgram({
            appId: this.getAppInfo.storeAppId,
            path: '/pages/home/main?path=leader-apply'
          })
          break
        default:
          this.$pt.navigateToMiniProgram({appId: this.getAppInfo.storeAppId})
          break
      }
    },
    lowVersionEls() {
      this.$pt.showTabBar({
        animation: false
      })
    },
    getBanner() {
      if (this.customerCommanderStatus || this.veekrayStatus) {
        // 没有门店或团长身份 直接隐藏两个banner
        this.showBanner = false
        this.bannerArr['group'] = ''
        this.bannerArr['shop'] = ''
      } else {
        this.showBanner = true
        // 是否开启社区团购功能 (开启：隐藏店主banner)
        if (this.groupBuyAuthority) {
          // 获取社区团购banner
          let params = {
            enterpriseId: this.getEnterpriseId,
            memberId: this.getCustomerId
          }
          getCommanderBanner(params).then(response => {
            if (response.data !== '') {
              this.bannerArr['group'] = response.data
              this.bannerArr['shop'] = ''
            } else {
              // 是否有店主身份
              if (this.veekrayStatus) {
                this.showBanner = false
                this.bannerArr['shop'] = ''
                this.bannerArr['group'] = ''
              } else {
                // 获取社群banner 展示条件
                getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(response => {
                  // 获取社群分销店主banner
                  if (response.data.shopBannerShow) {
                    this.bannerArr['shop'] = response.data.shopBannerUrl
                    this.bannerArr['group'] = ''
                  } else {
                    this.showBanner = false
                  }
                })
              }
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          // 是否有店主身份
          if (this.veekrayStatus) {
            this.showBanner = false
            this.bannerArr['shop'] = ''
            this.bannerArr['group'] = ''
          } else {
            // 获取社群banner 展示条件
            getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(response => {
              // 获取社群分销店主banner
              if (response.data.shopBannerShow) {
                this.bannerArr['shop'] = response.data.shopBannerUrl
                this.bannerArr['group'] = ''
              } else {
                this.showBanner = false
              }
            })
          }
        }
      }
    },
    // 运营总后台 增值功能权限获取
    getAuthority() {
      getAuthority({enterpriseId: this.getEnterpriseId}).then(res => {
        this.shopCustomerServiceAuthority = res.data.shopCustomerServiceAuthority
        this.enterpriseCustomerServiceAuthority = res.data.enterpriseCustomerServiceAuthority
        this.shopSelectionAuthority = res.data.shopSelectionAuthority
      }).catch(err => {
        console.log(err)
      })
    },
    countCouponNum() {
      if (!this.getCustomerId) return
      countCouponNum({
        customerMemberId: this.getCustomerId
      }).then((response) => {
        if (response.isError) return
        this.couponUnreadNum = response.data
      }).catch(() => {
      })
    },
    // 买家点击消息按钮(在自己店铺时显示 不能与自己聊天)
    buyerToService() {
      let cId = this.$pt.getStorageSync('customerId')
      let mId = this.$pt.getStorageSync('memberId')
      if (cId === mId) {
        this.$utils.showToast({ title: '不能与自己聊天' })
      } else {
        this.$pt.navigateTo({url: '/pages/personal/message/detail/main?memberId=' + this.getMemberId})
      }
    },
    // 游客点击授权按钮 获取用户基本信息
    showPage() {
      this.isGetUserInfo = false
      this.isGetPhoneInfo = false
      this.$pt.showTabBar({
        animation: false
      })
    },
    authPhoneInfo() {
      this.isGetPhoneInfo = true
    },
    // 游客模式下点击页面 跳转授权页
    goAuthPage() {
      this.showLayOut = false
      if (!this.getCustomerId) {
        this.isGetUserInfo = false
        setTimeout(() => {
          this.isGetUserInfo = true
        }, 100)
      } else if (!this.getPhone) {
        this.isGetPhoneInfo = true
      }
      this.showBackBtn = true
      this.$pt.hideTabBar({
        animation: false
      })
      wx.setNavigationBarColor({
        frontColor: '#000000',
        backgroundColor: '#ffffff'
      })
    },
    getAppEls() {
      getAppInfo().then((response) => {
        if (response.isError) return
        let getAppInfo = response.data
        this.getAppInfo = appColor(getAppInfo)
        this.globalStyle = this.getAppInfo.style
        this.getAppInfo.appVersion = process.env.VERSION
      }).catch(() => {
      })
    },
    // 获取客户提货码
    getPickUpCode() {
      this.showCodeAlert = !this.showCodeAlert
      if (this.showCodeAlert && !this.pickUpGoodesCode) {
        getPickUpCode({memberId: this.getCustomerId}).then(res => {
          // console.log(res)
          this.pickUpGoodesCode = res.data
        })
      }
      return this.pickUpGoodesCode
    },
    getEnterpriseByMemberId() {
      if (!this.getMemberId) return
      getEnterpriseByMemberId({
        memberId: this.getMemberId
      }).then((response) => {
        if (response.isError) return
        this.enterpriseCopy = response.data
      }).catch(() => {
      })
    },
    messageSuccessTo(val, type) {
      let that = this
      switch (val) {
        case 'customer':
          // 自营订单
          that.$pt.navigateTo({
            url: '/pages/personal/order/main?type=' + type
          })
          break
        case 'sell':
          // 分销订单
          that.$pt.navigateTo({
            url: '/pages/personal/distribution/order/main?type=' + type
          })
          break
        case 'service':
          // 小B客服
          if (that.statusIs) {
            that.$pt.navigateTo({url: '/pages/personal/message/list/main'})
          } else {
            that.buyerToService()
          }
          break
        case 'all':
          // 自营订单全部、分销订单全部
          if (that.activeIndex === 0 && that.entityData.selfGoodsAuthority === 1) {
            that.$pt.navigateTo({ url: '/pages/personal/order/main' })
          } else {
            that.$pt.navigateTo({ url: '/pages/personal/distribution/order/main' })
          }
          break
        case 'myCoupon':
          // 分销订单
          that.$pt.navigateTo({ url: '/pages/personal/my-coupon/main' })
          break
      }
    },
    messageEls(val, type, index) {
      let that = this
      let rejectArr = []
      if (!that.messageIdsArr[index]['ids'].length) {
        this.messageSuccessTo(val, type)
        return
      }
      this.$pt.requestSubscribeMessage({
        tmplIds: that.messageIdsArr[index].ids,
        success: function(res) {
          // 成功
          Object.keys(res).forEach((key) => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            that.messageIdsArr[index].ids = rejectArr
            that.$utils.showToast({ title: '请允许消息通知！' })
          } else {
            that.messageSuccessTo(val, type)
          }
        },
        fail(err) {
          // 失败
          console.error(err)
        }
      })
    },
    customerOrderTo(type) {
      this.messageEls('customer', type, 2)
    },
    sellOrderTo(type) {
      this.messageEls('sell', type, 2)
    },
    serviceTo(type) {
      this.messageEls('service', '', 0)
    },
    returnOrderTo(type) {
      let that = this
      let rejectArr = []
      console.log('messageIdsArr', this.messageIdsArr)
      if (!this.messageIdsArr[1]['ids'].length) {
        this.$pt.navigateTo({
          url: '/pages/personal/order/refund-list/main?type=' + type
        })
        return
      }
      this.$pt.requestSubscribeMessage({
        tmplIds: that.messageIdsArr[1]['ids'],
        success: function(res) {
          // 成功
          Object.keys(res).forEach((key) => {
            if (res[key] === 'reject') {
              rejectArr.push(key)
            }
          })
          if (rejectArr.length) {
            that.messageIdsArr[1]['ids'] = rejectArr
            that.$utils.showToast({ title: '请允许消息通知！' })
          } else {
            that.$pt.navigateTo({
              url: '/pages/personal/order/refund-list/main?type=' + type
            })
          }
        },
        fail(err) {
          // 失败
          console.error(err)
        }
      })
    },
    messageSubscription(messageItem) {
      messageItem['ids'] = []
      let dataStr = messageItem.dataArr.toString()
      if (!this.getMemberId) return
      listEnterpriseMessageConfig({
        memberId: this.getMemberId,
        ascriptionTypes: dataStr
      })
        .then((response) => {
          if (response.isError) return
          response.data.forEach((item) => {
            if (item.miniMadeId) {
              messageItem['ids'].push(item.miniMadeId)
            }
          })
        })
        .catch(() => { })
    },
    myCouponEls() {
      if (!this.phoneEls()) return
      this.messageEls('myCoupon', '', 3)
      // this.$pt.navigateTo({ url: '/pages/personal/my-coupon/main' })
    },
    addressEls() {
      if (!this.phoneEls()) return
      this.$pt.navigateTo({
        url: '/pages/personal/address/main?urlFrom=personal'
      })
    },
    customerOrderEls(type) {
      if (!this.phoneEls()) return
      if (type === 'all') {
        this.$pt.navigateTo({
          url: '/pages/personal/order/customer-order/main'
        })
      } else {
        this.$pt.navigateTo({
          url: '/pages/personal/order/customer-order/main?type=' + type
        })
      }
    },
    customerReturnEls(type) {
      if (!this.phoneEls()) return
      this.$pt.navigateTo({ url: '/pages/personal/order/refund-list/main?type=buyer' })
    },
    phoneEls() {
      if (this.getCustomerId) {
        if (!this.getPhone) {
          this.isGetPhoneInfo = true
          this.$pt.setNavigationBarColor({
            frontColor: '#000000',
            backgroundColor: '#ffffff'
          })
          return false
        }
        return true
      }
    },
    initPhoneLayer() {
      this.$pt.showTabBar({
        animation: false
      })
      this.isGetPhoneInfo = false
    },
    cartIndexEls() {
      let cartIndex = null
      this.navList = this.$pt.getStorageSync('navList')
      if (this.navList.length) {
        this.navList.forEach((item, index) => {
          if (item.linkType === 1007) {
            cartIndex = index
          }
        })
      } else {
        cartIndex = 2
      }
      return cartIndex
    },
    totalCartBadge() {
      let cartBadge = 0
      if (!this.$pt.getStorageSync('cartBadge')) {
        this.$pt.removeStorageSync('cartBadge')
        this.$pt.removeTabBarBadge({
          index: this.cartIndexEls()
        })
        return
      }
      if (this.cartIndexEls()) {
        cartBadge = this.$pt.getStorageSync('cartBadge')
        this.$pt.setTabBarBadge({
          index: this.cartIndexEls(),
          text: String(cartBadge)
        })
      }
    },
    checkTotal() {
      this.messageEls('all', 'all', 2)
    },
    statOrderByMemberId(type) {
      let memberTypeVal = null
      switch (type) {
        case 0:
          // 买家
          memberTypeVal = 2
          break
        case 1:
          // 卖家
          memberTypeVal = 1
          break
      }
      this.unReadCount = {}
      statOrderByMemberId({
        memberId: this.getCustomerId,
        memberType: memberTypeVal
      }).then((response) => {
        if (response.isError) return
        this.unReadCount = response.data
        this.unReadCount.buyerUnpaidNum = this.unReadCount.unpaidUnreadUserOrderNum + this.unReadCount.unpaidUnreadProjectOrderNum
        this.unReadCount.buyerPaidNum = this.unReadCount.paidUnreadUserOrderNum + this.unReadCount.paidUnreadProjectOrderNum + this.unReadCount.partDeliveredUnreadProjectOrderNum
        this.unReadCount.paidUnreadProjectOrderNum = this.unReadCount.paidUnreadProjectOrderNum + this.unReadCount.partDeliveredUnreadProjectOrderNum
        this.unReadCount.buyerDeliveredNum = this.unReadCount.deliveredUnreadUserOrderNum + this.unReadCount.deliveredUnreadProjectOrderNum
        // unpaidUserOrderNum  自营未付款订单数
        // paidUserOrderNum 已付款数
        // deliveredUserOrderNum 已发货数
        // receivedUserOrderNum 已收货数
        // unpaidProjectOrderNum 系统订单未付款数
        // paidProjectOrderNum 已付数
        // partDeliveredUnreadProjectOrderNum 部分发货数
        // deliveredProjectOrderNum 已发货数
        // receivedProjectOrderNum 已收数
        // cancelUnreadProjectOrderNum 取消数
        Object.keys(this.unReadCount).forEach(key => {
          const changeData = this.unReadCount[key]
          this.$delete(this.unReadCount, key)
          this.$set(this.unReadCount, key, changeData)
        })
        this.tab.forEach((item) => {
          if (item.orderType === 10) {
            if (this.unReadCount.totalUnreadUserOrderNum) {
              item.count = this.unReadCount.totalUnreadUserOrderNum
            }
          } else {
            if (this.unReadCount.totalUnreadProjectOrderNum) {
              item.count = this.unReadCount.totalUnreadProjectOrderNum
            }
          }
        })
      })
    },
    statusClick() {
      // 暂时隐藏 切换到卖家页面
      if (!this.statusIs) return
      // 以下为原流程代码
      if (this.statusIs === false) {
        // 更换成卖家身份
        if (!this.checkOwner) {
          const that = this
          this.$pt.showModal({
            content: '切换卖家身份后回到自己的店铺，是否确认切换？',
            success(res) {
              if (res.confirm) {
                that.$utils.setMyId(that.getCustomerId)
                setMemberId(that.getCustomerId)
                that.$root.$mp.appOptions.query = {}
                that.statOrderByMemberId(1)
                setTimeout(() => {
                  that.$pt.reLaunch({ url: '/pages/personal/main' })
                }, 300)
              } else if (res.cancel) {
                console.log('用户取消')
              }
            }
          })
        } else {
          this.statOrderByMemberId(1)
        }
        this.appIconList = appIcon(this.globalStyle.styleType, 1)
      } else {
        // 更换成买家身份
        this.statusIs = false
        this.statusText = '切换为卖家'
        this.$pt.setStorageSync('personalType', 0)
        this.countCouponNum()
        this.statOrderByMemberId(0)
        this.appIconList = appIcon(this.globalStyle.styleType, 0)
      }
      this.getAuthority()
    },
    tabClick(index) {
      this.activeIndex = index.mp.detail.index
    },
    getSysAppMarketByMemberId() {
      // 获取应用市场权限 (是否开通功能)
      let params = {
        memberId: this.getCustomerId,
        userType: this.$pt.getStorageSync('personalType'),
        appCode: 'pickUpFlag'
      }
      getSysAppMarketByMemberId(params).then((response) => {
        if (response.isError) return
        this.pickUpFlag = response.data
      })
    },
    getMemberInfo() {
      this.isImConnect = false
      setTimeout(() => {
        this.isImConnect = true
      }, 100)
      getMemberInfo(this.getCustomerId).then((response) => {
        if (response.isError) return
        this.memberInfo = response.data
        // this.anchorAuth = response.data.anchorAuth // 获取该用户是否是主播
        this.memberInfo.nickname = this.$utils.getStrByLength(
          this.memberInfo.nickname,
          13
        )
        // veekrayStatus 萤火微客注册状态 -1:未注册 0:免费名片 1:付费名片
        setNickName(response.data.nickname)
        if (response.data.enterpriseId) {
          setEnterpriseId(response.data.enterpriseId)
          this.enterpriseId = response.data.enterpriseId
        }
        if (response.data.veekrayStatus !== undefined) setVeekrayStatus(response.data.veekrayStatus)
        if (this.memberInfo.veekrayStatus === 1) {
          this.freeBoolean = false
        } else {
          this.freeBoolean = true
        }
        if (this.memberInfo.memberShareFlag === 1) {
          this.shareType = true
        } else {
          this.shareType = false
        }
      })
    },
    getEntityByMemberId() {
      // 企业配置信息，可获取增值业务是否开启
      // 用来判断申请店播展示
      getEntityByMemberId({
        memberId: this.getCustomerId || ''
      }).then((response) => {
        // console.log(response)
        if (response.isError) return
        this.entityData = response.data
        // this.entityData.selfGoodsAuthority = 0
        if (response.data.taskPosterAuth) {
          this.taskPosterAuth = this.entityData.taskPosterAuth
        }
        if (this.entityData.crossBorderBusinessFlag) {
          setCbFlag(this.entityData.crossBorderBusinessFlag)
        } else {
          setCbFlag(0)
        }
        // console.log('权限', this.shopSelectionAuthority)
        if (this.shopSelectionAuthority && this.entityData.liveAuthority && this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/commodity-library-1.png',
              type: 1,
              className: 'width-170 height-125',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '商品库',
              lineTwo: '海量商品任你挑',
              linkTo: '/pages/personal/commodity-library/main'
            }],
            rightList: [{
              src: this.fileSpace + '/images/video-shop-1.png',
              type: 2,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '申请店播',
              lineTwo: '你要的直播购物',
              linkTo: '/pages/personal/live-apply/main'
            }, {
              src: this.fileSpace + '/images/pk-1.png',
              type: 3,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '直播分发PK榜',
              lineTwo: '查看您店铺的',
              lineThree: '直播间观众排名',
              linkTo: '/pages/personal/live-pk/main'
            }]
          }
        } else if (this.shopSelectionAuthority && this.entityData.liveAuthority && !this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/commodity-library-2.png',
              type: 1,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '商品库',
              lineTwo: '海量商品任你挑',
              linkTo: '/pages/personal/commodity-library/main'
            }],
            rightList: [{
              src: this.fileSpace + '/images/video-shop-1.png',
              type: 2,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '申请店播',
              lineTwo: '你要的直播购物',
              linkTo: '/pages/personal/live-apply/main'
            }]
          }
        } else if (this.shopSelectionAuthority && !this.entityData.liveAuthority && this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/commodity-library-1.png',
              type: 1,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '商品库',
              lineTwo: '海量商品任你挑',
              linkTo: '/pages/personal/commodity-library/main'
            }],
            rightList: [{
              src: this.fileSpace + '/images/pk-1.png',
              type: 3,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '直播分发PK榜',
              lineTwo: '查看您店铺的',
              lineThree: '直播间观众排名',
              linkTo: '/pages/personal/live-pk/main'
            }]
          }
        } else if (this.shopSelectionAuthority && !this.entityData.liveAuthority && !this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/commodity-library-3.png',
              type: 1,
              className: 'width-345 height-42',
              titleFont: 'font-12',
              titleLeft: 'left: 74px;',
              lineOne: '商品库',
              lineTwo: '海量商品任你挑',
              linkTo: '/pages/personal/commodity-library/main'
            }],
            rightList: []
          }
        } else if (!this.shopSelectionAuthority && this.entityData.liveAuthority && this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/video-shop-1.png',
              type: 2,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '申请店播',
              lineTwo: '你要的直播购物',
              linkTo: '/pages/personal/live-apply/main'
            }],
            rightList: [{
              src: this.fileSpace + '/images/pk-1.png',
              type: 3,
              className: 'width-170 height-62',
              titleFont: 'font-14',
              titleLeft: 'left: 15px;',
              lineOne: '直播分发PK榜',
              lineTwo: '查看您店铺的',
              lineThree: '直播间观众排名',
              linkTo: '/pages/personal/live-pk/main'
            }]
          }
        } else if (!this.shopSelectionAuthority && this.entityData.liveAuthority && !this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/video-shop-2.png',
              type: 2,
              className: 'width-345 height-42',
              titleFont: 'font-12',
              titleLeft: 'left: 74px;',
              lineOne: '申请店播',
              lineTwo: '你要的直播购物',
              linkTo: '/pages/personal/live-apply/main'
            }],
            rightList: []
          }
        } else if (!this.shopSelectionAuthority && !this.entityData.liveAuthority && this.entityData.liveShowType) {
          this.barObj = {
            leftList: [{
              src: this.fileSpace + '/images/pk-2.png',
              type: 3,
              className: 'width-345 height-42',
              titleFont: 'font-12',
              titleLeft: 'left: 82px;',
              lineOne: '直播分发PK榜',
              lineTwo: '查看您店铺的直播间观众排名',
              linkTo: '/pages/personal/live-pk/main'
            }],
            rightList: []
          }
        }
        if (!this.entityData.selfGoodsAuthority) {
          this.tab = [
            { name: this.getAppInfo.projectOrderAlias || '分销订单', orderType: 30, count: null }
          ]
        } else {
          this.tab = [
            { name: '自营订单', orderType: 10, count: null },
            { name: this.getAppInfo.projectOrderAlias || '分销订单', orderType: 30, count: null }
          ]
        }
      })
    },
    getMemberDistri() {
      this.$pt.navigateTo({ url: '/pages/personal/distribution/list/main' })
    },
    statMemberCommission() {
      // 取当月数据
      let statMonth = this.$utils.formatYearMonth(new Date())
      statMemberCommission({
        memberId: this.getCustomerId,
        month: statMonth
      })
        .then((response) => {
          if (response.isError) return
          this.memberStat = response.data
          // 获取全部金额
          statMemberCommission({ memberId: this.getCustomerId })
            .then((response) => {
              this.memberStat.totalIncome = response.data.totalIncome
            })
            .catch(() => { })
        })
        .catch(() => { })
    },
    countPaidUserOrder() {
      if (!this.getMemberId) return
      countPaidUserOrder({
        memberId: this.getMemberId
      })
        .then((response) => {
          if (response.isError) return
          this.paidUserOrders = response.data
        })
        .catch(() => { })
    },
    myVeekray() {
      this.$utils.setMyId(this.getCustomerId)
      this.$root.$mp.appOptions.query = {}
      this.$pt.reLaunch({ url: '/pages/home/main' })
    },
    onClose(value) {
      // 申请主播相关关闭按钮
      this[value] = false
    },
    applyLiveConfirm() {
      // 申请主播确认提交信息按钮
      this.applyLiveShow = false
      this.applyReviewShow = true
    },
    getByEnterpriseId() {
      getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(response => {
        if (response.isError) return
        this.enterpriseConfig = response.data
      }).catch({})
    },
    getByMemberId() {
      // 查看申请店主状态
      const params = {
        memberId: this.getCustomerId,
        // nature: this.memberInfo.nature,
        enterpriseId: this.getEnterpriseId
      }
      getByMemberId(params).then(response => {
        if (response.isError) return
        // applyStatus为-1是从未申请过，为0是申请中，为1是通过，为2是拒绝
        this.applyStatus = response.data.status
        this.applyStatusClick = this.$pt.getStorageSync('applyStatusClick') || false
        if (this.applyStatus !== 1) {
          this.getByEnterpriseId()
        }
        if (this.applyStatus === 2 && !this.applyStatusClick) {
          this.$pt.showModal({
            title: '温馨提示',
            showCancel: false,
            confirmText: '朕知道了',
            confirmColor: '#409eff',
            content: '您的申请店主权限已经被拒绝 请联系客服查明原因~',
            success: res => {
              if (res.confirm) {
                this.applyStatusClick = true
                this.$pt.setStorageSync('applyStatusClick', true)
              }
            }
          })
        }
      }).catch({
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  background: #fff;
  color: #292929;
  min-height: calc(100vh);
  overflow: hidden;
  .fix-r-btn{
    position: fixed;
    right: 0;
    bottom: 2px;
    z-index: 20;
  }
  .copy-right-logo {
    padding-bottom: 25px;
    img {
      margin: 12px auto 3px auto;
    }
    p {
      color: #cccccc;
    }
  }
  .order-buy-all {
    // border-bottom: #f7f7f7 1px solid;
    // border-bottom: #eee 1px solid;
    .t-txt {
      color: #1f1f1f;
    }
  }
  .tabs-buy-all {
    position: absolute;
    right: 0;
    top: 0;
    color: #c5c5c5;
  }
  .tabs-all {
    position: absolute;
    right: 0;
    top: 0;
  }
  .layer-main {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  .top-header-bg {
    height: 180rpx;
    position: relative;
    z-index: 10;
    .bg-style {
      display: block;
      position: absolute;
      z-index: 5;
      font-size: 0;
      left: 50%;
      bottom: -38px;
      width: 600px;
      height: 320px;
      margin-left: -300px;
      background: #ffe200;
      border-radius: 100%;
    }
  }
  .pancel-bg-c {
    background: rgba(0, 0, 0, 0.6) !important;
  }
  .dark-light {
    color: #dfddd9;
  }
  .coupon-infos{
    .van-infos{
      position: absolute;
      right: 22px;
      top: 15px;
    }
  }
  .van-infos {
    display: inline-block;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
    text-align: center;
    box-sizing: border-box;
    padding: 0 3px;
    min-width: 16px;
    line-height: 14px;
    border: 1px solid #fff;
    border-radius: 16px;
    background-color: #ff1d1d;
    -webkit-transform: translateX(0) !important;
    transform: translateX(0) !important;
    -webkit-transform-origin: 100%;
    transform-origin: 100%;
  }
  .main-box {
    position: relative;
    z-index: 11;
    // margin-top: -370rpx;
    .contactBtn {
      background-color: transparent !important;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 999;
      border-color: transparent !important;
      border: none !important;
    }
    .userinfo {
      margin-top: 32px;
      .avatar-bar {
        .icon-v {
          width: 12px;
          height: 12px;
          position: absolute;
          right: 0px;
          bottom: 0px;
        }
        .a-img {
          width: 40px;
          height: 40px;
          border-radius: 100px;
          box-shadow: 0 4px 9px rgba(178, 178, 178, 0.6);
        }
      }
      .info {
        label {
          color: #595959;
        }
      }
      .change-user {
        // background: #fff180;
        background: rgba(255, 255, 255, 0.2);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        .icon-c-u {
          width: 16px;
          height: 17px;
        }
      }
    }
    .pancel-top-bg {
      position: absolute;
      left: 0px;
      top: 20px;
      width: 100%;
      background: #fff;
      // height: 60px;
      height: 40px;
      z-index: 3;
    }
    .pancel-bar {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 9px rgba(133, 133, 133, 0.2);
      position: relative;
      z-index: 5;
      &.none-radius {
        .pancel-title {
          padding-top: 40rpx;
          padding-left: 35rpx;
          font-weight: 700;
          font-size: 30rpx;
        }
      }
      .shop-tools {
        flex-wrap: wrap;
        .self-flex-item {
          width: 25%;
        }
        .new-item {
          position: relative;
          .new-tag {
            position: absolute;
            width: 44rpx;
            height: 24rpx;
            font-size: 16rpx;
            background: #f00;
            color: #fff;
            border-radius: 6px 6px 6px 0;
            top: -10rpx;
            right: 30rpx;
          }
        }
      }
      .news-tag-style1{
        position: absolute;
        font-size: 18rpx;
        background: #f00;
        color: #fff;
        border-radius: 5px;
        top: -7px;
        right: 44rpx;
        padding: 0px 4rpx;
      }
      .news-tag-style2 {
        position: absolute;
        font-size: 18rpx;
        background: #f00;
        color: #fff;
        border-radius: 50%;
        top: -7rpx;
        right: 55rpx;
        width: 30rpx;
        height: 30rpx;
        text-align: center;
      }
      .tabs-box {
        padding-right: 43%;
        padding-left: 3%;
        border-bottom: #f1f1f1 1px solid;
        &.tabs-box-0 {
          padding-right: 70%;
        }
        .van-infos {
          position: absolute;
          top: 3px;
          z-index: 20;
          &.we-infos {
            left: 24%;
          }
          &.sell-infos {
            left: 54%;
            &.sell-tag-0 {
              left: 25%;
            }
          }
        }
        /deep/ .van-tab__title {
          position: relative;
          z-index: 2;
        }
      }
      ul {
        &.sell-o-list {
          li {
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(4) {
              .van-infos {
                left: 57% !important;
              }
            }
            .van-infos {
              position: absolute;
              left: 62%;
              top: -5px;
            }
          }
        }
        &.buyer-o-list {
          li {
            &:nth-child(1) {
              .van-infos {
                left: 58% !important;
              }
            }
            &:nth-child(4) {
              .van-infos {
                left: 56% !important;
              }
            }
            .van-infos {
              position: absolute;
              left: 60%;
              top: -5px;
            }
          }
        }
        li {
          text-align: center;
          img {
            display: inline-block;
            margin-bottom: 18rpx;
          }
          label {
            display: block;
            font-size: 12px;
            margin-top: -8px;
          }
        }
      }
    }
    .light-bg {
      background: #fbfbfb;
      overflow: hidden;
    }
    .nav {
      height: 75px;
      background-color: #fff;
      margin-top: 10px;
      margin-bottom: 10px;
      .hot-icon {
        width: 32px;
        height: 16px;
        position: absolute;
        right: 2px;
        top: -9px;
        &.hot-2 {
          right: -17px;
        }
      }
      .data-number {
        color: #fec70a;
        padding-top: 7px;
      }
      .sale-border {
        border-right: #f1f1f1 1px solid;
      }
      ul {
        height: 100%;
        li {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .icon1 {
            width: 25px;
            height: 23.5px;
          }
          .icon2 {
            width: 21px;
            height: 25px;
          }
          .info {
            margin-left: 12px;
            h5 {
              font-size: 15px;
              font-weight: bold;
              color: #333333;
              display: flex;
              align-items: center;
              position: relative;
            }
            p {
              font-size: 10px;
              color: #999999;
            }
          }
        }
      }
    }
    .list {
      ul {
        padding-left: 15px;
        background-color: #fff;
        margin-bottom: 10px;
      }
      li {
        height: 50px;
        display: flex;
        justify-content: space-between;
        &:first-child {
          .info {
            border-top: none;
          }
        }
        .name {
          font-size: 15px;
          color: #333333;
          display: flex;
          align-items: center;
          height: 100%;
          .icon {
            width: 19px;
            height: auto;
            margin-right: 13px;
          }
        }
        .info {
          font-size: 14px;
          color: #333333;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          padding-right: 15px;
          border-top: 1px solid #ebebeb;
          .info-right {
            color: #999999;
            font-size: 12px;
            display: flex;
            align-items: center;
          }
          .iconfont {
            font-size: 13px;
            margin-left: 6px;
          }
          image {
            width: 5.5px;
            height: auto;
            margin-left: 15px;
          }
        }
      }
    }
    .copy-right {
      color: #dadada;
    }
  }
}
.font-9 {
  font-size: 9px !important;
}
.pk-list {
  padding-left: 82px;
  justify-content: center;
}

.customize-tabs-style {
  .van-tabs__line {
    bottom: 24rpx !important;
  }
}
.two-img-box {
  display: flex;
  justify-content: space-around;
  img {
    width: 340rpx;
    height: 125rpx;
    background: #fffef4;
    border-radius: 16rpx;
  }
}
.three-img-box {
  display: flex;
  justify-content: space-around;
  & > div:nth-child(1) {
    img {
      width: 340rpx;
      height: 260rpx;
    }
  }
  & > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 340rpx;
      height: 125rpx;
    }
  }
}
.customize-navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  box-sizing: border-box;
  z-index: 100;
}
.dialog-wrap {
  /deep/ .van-popup {
    border-radius: 16px;
    .van-dialog__header {
      padding-top: 20px;
    }
  }
  .apply-info {
    background-color: #eee;
    height: 40px;
    font-size: 14px;
    padding: 0 10px 0;
    input {
      background-color: white;
      text-align: right;
      padding: 0 5px;
    }
  }
  .explain {
    color: #9a9a9a;
    font-size: 10px;
    margin: 8px auto 0;
    line-height: 15px;
  }
}
.apply-shopowner{
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
}

  .top-nav{
    color: #333;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    font-size: 15px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-top: 20rpx;
    .top-txt{
      font-size: 15px;      
      .txt-min{
        max-width: 90px;
        height: 24px;
        line-height: 1.3;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:1;
        -webkit-box-orient:vertical;
        word-break:break-word;
      }
    }
    .iconfont{
      margin-top: 3px;
      margin-left: 3px;
      font-size: 15px;
      transform:rotate(90deg);
      &.icon-next{
        margin-top: 0px;
        margin-left: 3px;
        font-size: 15px;
        transform:rotate(0deg);
        color: #292929;
      }
    }
  }
  .text-layer{
    position: absolute;
    top: 0;
    line-height: 1.4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .font-81{
    color: #818181;
  }
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
</style>
